<template>
  <div class="">
    <div id="regional-proportion" />
    <ClueTableDialog ref="registeTableDialog" />
  </div>
</template>
<script>
import echarts from 'echarts'
import { getClueAmountGroupByOrg } from '@/api/clue'
import resize from '../mixins/resize'
import ClueTableDialog from './ClueTableDialog.vue'
export default {
  components: {
    ClueTableDialog
  },
  mixins: [resize],
  props: {
    year: Number
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    getParams() {
      const params = {
        startDate: `${this.year}-01-01`,
        endDate: `${this.year}-12-31`
      }
      return params
    },
    showDialog(showParams) {
      this.$refs.registeTableDialog.show(showParams)
    },
    async initChart() {
      const res = await getClueAmountGroupByOrg()
      console.log(res)
      const color = ['#00D7E9', '#7AF3C2', '#8A8AFF', '#13AFFF']
      const resData = res.data.map((item, index) => {
        return {
          ...item,
          color: color[index] || '#00D7E9'
        }
      })
      this.chart = echarts.init(document.getElementById('regional-proportion'))

      var data = {
        dataAge: resData
      }
      const option = {
        grid: {
          left: '5',
          right: '5',
          top: '15',
          bottom: '5'
        },
        color: ['#00D7E9', '#7AF3C2', '#8A8AFF', '#13AFFF'],
        series: [
          {
            color: ['#00D7E9', '#7AF3C2', '#8A8AFF', '#13AFFF', '#FFF5A7'],
            type: 'pie',
            radius: ['60', '88'],
            minAngle: 15, // 最小角度
            startAngle: 45, // 起始角度
            avoidLabelOverlap: true,
            labelLine: {
              normal: {
                length: 10,
                length2: 30,
                lineStyle: {
                  type: 'solid'
                }
              }
            },
            label: {
              normal: {
                formatter: (params) => {
                  return `{c|${params.percent.toFixed(0)}%}\n{b|${
                    params.name
                  }}`
                },
                borderWidth: 0,
                borderRadius: 4,
                fontSize: 13,
                align: 'center',
                color: '#3494BD',
                rich: {
                  b: {
                    fontSize: 12,
                    lineHeight: 20,
                    padding: [0, 0, 5, 0]
                  },
                  c: {
                    fontSize: 20,
                    lineHeight: 20,
                    color: '#ffffff'
                  }
                }
              }
            },
            data: data.dataAge
          },

          {
            type: 'pie',
            radius: ['58', '59'],
            data: [100],
            label: {
              show: false
            }
          }
        ]
      }

      this.chart.clear() // 清除画布，重新绘制的时候就不会遗留之前的数据，解决高度数据变化echarts高度不变问题
      this.chart.setOption(option) // 重新绘制图标
      this.chart.on('click', (params) => {
        const dateParams = this.getParams()
        const showParams = {
          ...dateParams,
          id: params.data.id
        }
        console.log(showParams)
        this.showDialog(showParams)
      })
      // let currentIndex = -1; // 当前高亮图形在饼图数据中的下标
      // let changePieInterval = setInterval(selectPie, 2500); // 设置自动切换高亮图形的定时器

      // function highlightPie() {
      //   // 取消所有高亮并高亮当前图形
      //   // 遍历饼图数据，取消所有图形的高亮效果
      //   for (var idx in option.series[0].data)
      //     this.chart.dispatchAction({
      //       type: "downplay",
      //       seriesIndex: 0,
      //       dataIndex: idx,
      //     });
      //   // 高亮当前图形
      //   this.chart.dispatchAction({
      //     type: "highlight",
      //     seriesIndex: 0,
      //     // type: 'showTip',
      //     dataIndex: currentIndex,
      //   });
      // }

      // this.chart.on("mouseover", (params) => {
      //   // 用户鼠标悬浮到某一图形时，停止自动切换并高亮鼠标悬浮的图形
      //   clearInterval(changePieInterval);
      //   currentIndex = params.dataIndex;
      //   highlightPie();
      // });

      // this.chart.on("mouseout", (params) => {
      //   // 用户鼠标移出时，重新开始自动切换
      //   if (changePieInterval) clearInterval(changePieInterval);
      //   changePieInterval = setInterval(selectPie, 2500);
      // });

      // function selectPie() {
      //   // 高亮效果切换到下一个图形
      //   var dataLen = option.series[0].data.length;
      //   currentIndex = (currentIndex + 1) % dataLen;
      //   highlightPie();
      // }
    }
  }
}
</script>
<style>
#regional-proportion {
  width: 100%;
  height: 300px;
}
</style>
